<template>
  <div class="agent">
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="40%">
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">姓名:{{ detail.name }}</el-col>
        <el-col :span="12">手机号:{{ detail.phoneNum }}</el-col>
      </el-row>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">住址:{{ detail.address }}</el-col>
        <el-col :span="12">审核状态:{{ statusList[detail.status] }}</el-col>
      </el-row>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">审核人:{{ detail.auditName }}</el-col>
        <el-col :span="12">申请日期:{{ detail.applyDate }}</el-col>
      </el-row>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">审核日期:{{ detail.auditDate }}</el-col>
      </el-row>
      <label>身份证正反面</label>
      <el-row style="margin: 10px 5px;">
        <el-col :span="24">
          <el-image
            :src="detail.card1"
            style="width:220px;height:120px;margin: 5px;"
            :preview-src-list="[detail.card1]"
          />
          <el-image
            :src="detail.card2"
            style="width:220px;height:120px;margin: 5px;"
            :preview-src-list="[detail.card2]"
          />
        </el-col>
      </el-row>
      <label>关联微信信息:</label>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">
          <el-image :src="detail.avatarUrl" style="width:60px;height:60px;" />
        </el-col>
        <el-col :span="12">昵称:{{ detail.nickname }}</el-col>
      </el-row>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">性别:{{ detail.sex==1?'男':'女' }}</el-col>
        <el-col :span="12">宣传总人数:{{ detail.recommendNum }}</el-col>
      </el-row>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">累计消费:{{ detail.allTotal }}</el-col>
        <el-col :span="12">累计积分:{{ detail.totalCredits }}</el-col>
      </el-row>
      <el-row style="margin: 10px 5px;">
        <el-col :span="12">积分余额:{{ detail.availableCredits }}</el-col>
        <el-col :span="12">会员等级:{{ memberLevels[detail.memberLevel] }}</el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="detail.status == 1 || detail.status ==3"
          type="primary"
          round
          @click="ok()"
        >审核通过</el-button>
        <el-button
          v-if="detail.status == 1"
          type="primary"
          round
          @click="rejectVisible = true"
        >审核不通过</el-button>
        <el-button @click="dialogCancel()" round>关 闭</el-button>
      </div>
    </el-dialog>
    <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParam.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="queryParam.phoneNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="申请时间:" prop="timespan">
        <el-date-picker
          v-model="queryParam.timespan"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="look_btn" type="primary" @click="getList()">查询</el-button>
        <el-button @click="resetForm('queryParam')">重置</el-button>
        <el-button type="primary" @click="agentEditDialog()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-row class="elrow" :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-body">
            <el-table
              :data="list"
              style="width: 100%;"
              row-key="id"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
            >
              <el-table-column label="姓名" width="180" prop="name"></el-table-column>
              <el-table-column label="手机号" width="180" prop="phoneNum"></el-table-column>
              <el-table-column label="宣传总人数" width="180" prop="recommendNum"></el-table-column>
              <el-table-column label="代理余额" width="180" prop="balance"></el-table-column>
              <el-table-column label="代理来源类型" width="180" prop="sourceType">
                <template slot-scope="scope">
                  {{scope.row.sourceType===1?'门店':'员工'}}
                </template>
              </el-table-column>
              <el-table-column label="代理来源" width="180" prop="sourceName"></el-table-column>
              <el-table-column label="代理卡金额过期时间" width="180" prop="balanceExpireTime"></el-table-column>
              <el-table-column label="身份证正面" width="180" prop="card1">
                <template slot-scope="scope">
                  <el-image
                    :src="scope.row.card1"
                    style="width:120px;height:80px"
                    :preview-src-list="[scope.row.card1]"
                  />
                </template>
              </el-table-column>
              <el-table-column label="身份证反面" width="180" prop="card2">
                <template slot-scope="scope">
                  <el-image
                    :src="scope.row.card2"
                    style="width:120px;height:80px"
                    :preview-src-list="[scope.row.card2]"
                  />
                </template>
              </el-table-column>
              <el-table-column label="住址" width="180" prop="address"></el-table-column>
              <el-table-column label="审核状态" width="180" prop="status">
                <template slot-scope="scope">{{ statusList[scope.row.status] }}</template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" min-width="180">
                <template slot-scope="scope">
                  <!-- <el-button size="small" type="text" @click="detailDialog(scope.row)">详情</el-button> -->
                  <el-button size="small" type="text" @click="agentEditDialog(scope.row)">编辑</el-button>
                  <!-- <el-button type="text" size="small" @click="detailDialog(scope.row)">收益流水</el-button> -->
                  <el-button type="text" size="small" @click="recommenderDialog(scope.row)">分销人列表</el-button>
                  <el-button size="small" type="text" @click="customerConsumer(scope.row,'order')">订单记录</el-button>
                  <el-button
                    v-if="scope.row.status===2||scope.row.status===4"
                    @click="dialogIncomeFlowOpen(scope.row)"
                    type="text"
                    size="small"
                  >收益流水</el-button>
                  <el-button
                    v-if="scope.row.status==2"
                    type="text"
                    size="small"
                    @click="stop(scope.row)"
                  >停止合作</el-button>
                  <el-button
                    v-if="scope.row.status==4"
                    type="text"
                    size="small"
                    @click="recovery(scope.row)"
                  >恢复合作</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div>
      <el-dialog title="拒绝申请" :visible.sync="rejectVisible">
        <el-form :model="rejectInfo" ref="form">
          <el-form-item label="拒绝理由" :label-width="formLabelWidth" prop="name">
            <el-input
              v-model="rejectInfo.remark"
              autocomplete="off"
              maxlength="300"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" round @click="submitReject()">确 定</el-button>
        <el-button round @click="rejectVisible = false">关 闭</el-button>
      </el-dialog>
    </div>
    <incomeFlow v-bind:visible.sync="dialogIncomeFlow" ref="incomeFlow"></incomeFlow>
    <recommender v-bind:visible.sync="recommenderVisable" ref="recommender"></recommender>
    <agentEdit v-bind:visible.sync="agentEditVisable" ref="agentEdit" @success="getList()"></agentEdit>
    <customerConsumer v-bind:visible.sync="customerConsumerVisable" ref="customerConsumer"></customerConsumer>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import recommender from "./recommender";
import agentEdit from "./agentEdit";
import incomeFlow from "@/views/doctor/incomeFlow.vue";
import customerConsumer from "./customerConsumer";

export default {
  components: { recommender, incomeFlow,agentEdit,customerConsumer },
  data() {
    return {
      dialog: {
        title: "代理人信息",
        visible: false,
      },
      formLabelWidth: "100px",
      list: [],
      rules: {},
      queryParam: {
        name: null,
        phoneNumber: null,
        timespan: [],
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50],
      },
      detail: {
        id: "",
        customerId: "",
        phoneNum: "",
        card1: "",
        card2: "",
        name: "",
        address: "",
        status: "",
        remark: "",
        createdDate: "",
        allTotal: null,
        totalCredits: null,
        availableCredits: null,
        nickname: null,
        sex: null,
        avatarUrl: null,
        recommendNum: null,
        memberLevel: null,
        auditName: null,
        applyDate: null,
        auditDate: null,
      },
      statusList: {
        1: "未审核",
        2: "审核通过",
        3: "审核不通过",
        4: "停止合作",
      },
      memberLevels: {
        0: "注册用户",
        1: "普通会员",
        2: "银卡会员",
        3: "金卡会员",
        4: "钻石会员",
      },
      rejectVisible: false,
      rejectInfo: {
        remark: "",
      },
      recommenderVisable: false,
      idRecommender: "",
      dialogIncomeFlow: false,
      id: "",
      type: "",
      agentEditVisable: false,
      customerConsumerVisable: false,
    };
  },
  created() {
    this.getList();
  },
  watch: {},
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    detailDialog(row) {
      this.dialog.visible = true;
      this.detail = row;
    },
    getList() {
      let startDate, endDate;
      if (this.queryParam.timespan && this.queryParam.timespan.length > 0) {
        startDate = this.queryParam.timespan[0];
        endDate = this.queryParam.timespan[1];
      }
      this.$https
        .get("/agent/pageAgent", {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          startDate: startDate,
          endDate: endDate,
          name: this.queryParam.name,
          phoneNumber: this.queryParam.phoneNumber,
        })
        .then((res) => {
          this.list = res.data.data.list;
          this.page.total = Number.parseInt(res.data.data.total);
          this.page.currentPage = res.data.data.pageNum;
        });
    },
    dialogCancel() {
      this.dialog.visible = false;
    },
    ok() {
      postXform("/agent/ok", {
        id: this.detail.id,
      }).then((res) => {
        this.$message({ message: "审核成功", type: "success" });
        this.detail.status = 2;
        this.dialog.visible = false;
        this.getList();
      });
    },
    submitReject() {
      this.$https
        .postXform("/agent/reject", {
          id: this.detail.id,
          remark: this.rejectInfo.remark,
        })
        .then((res) => {
          this.$message({ message: "拒绝成功", type: "success" });
          this.detail.status = 3;
          this.rejectVisible = false;
        });
    },
    recommenderDialog(row) {
      this.recommenderVisable = true;
      this.$refs.recommender.initRecommender(row.customerId, "distribute");
    },
    dialogIncomeFlowOpen(row) {
      this.dialogIncomeFlow = true;
      this.id = row.id;
      this.$refs.incomeFlow.initIncomeFlow(row.customerId, "distribute");
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        if (formName == "queryParam") {
          this.getList();
        }
      }
    },
    stop(row) {
      this.$confirm("是否停止合作？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$https.postXform("agent/stop", { id: row.id }).then((res) => {
            this.$message({ message: "操作成功", type: "success" });
            this.getList();
          });
        })
        .catch(() => {});
    },
    recovery(row) {
      this.$confirm("是否恢复合作？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$https.postXform("agent/ok", { id: row.id }).then((res) => {
            this.$message({ message: "操作成功", type: "success" });
            this.getList();
          });
        })
        .catch(() => {});
    },
    agentEditDialog(row) {
      this.agentEditVisable = true;
      this.$refs.agentEdit.initAgent(row);
    },
    customerConsumer(row, type) {
      this.customerConsumerVisable = true;
      this.$refs.customerConsumer.initList(row.customerId, type);
    },
  },
};
</script>

<style lang="scss" scoped>
//@import "../../assets/css/agent/agent.scss";
</style>
